<script setup lang="ts">
import { ref } from 'vue';

// 定义用户类型
interface Player {
  id: number;
  username: string;
  points: number;
  solved: number;
  rank: number;
  team?: string;
}

// 排行榜数据
const players = ref<Player[]>([
  {
    id: 1,
    username: 'hacker_x',
    points: 1250,
    solved: 15,
    rank: 1,
    team: '安全先锋队'
  },
  {
    id: 2,
    username: 'security_master',
    points: 1120,
    solved: 13,
    rank: 2,
    team: '网络卫士'
  },
  {
    id: 3,
    username: 'cyber_ninja',
    points: 980,
    solved: 12,
    rank: 3,
    team: '数字特工'
  },
  {
    id: 4,
    username: 'coder_101',
    points: 850,
    solved: 10,
    rank: 4,
    team: '编程高手'
  },
  {
    id: 5,
    username: 'ctf_master',
    points: 760,
    solved: 9,
    rank: 5,
    team: 'CTF精英'
  },
  {
    id: 6,
    username: 'vulnerability_hunter',
    points: 650,
    solved: 8,
    rank: 6,
    team: '漏洞猎人'
  },
  {
    id: 7,
    username: 'white_hat',
    points: 580,
    solved: 7,
    rank: 7,
    team: '白帽黑客'
  },
  {
    id: 8,
    username: 'script_kiddie_pro',
    points: 450,
    solved: 6,
    rank: 8,
    team: '脚本小子进阶'
  },
  {
    id: 9,
    username: 'encryption_king',
    points: 390,
    solved: 5,
    rank: 9,
    team: '加密王者'
  },
  {
    id: 10,
    username: 'newbie_hacker',
    points: 280,
    solved: 4,
    rank: 10,
    team: '新手黑客'
  }
]);

// 排行榜类型（个人/团队）
const leaderboardType = ref('individual');

// 当前用户（模拟）
const currentUser = ref<Player>({
  id: 100,
  username: 'current_player',
  points: 320,
  solved: 5,
  rank: 12
});

// 切换排行榜类型
const switchLeaderboard = (type: string) => {
  leaderboardType.value = type;
};

// 搜索功能
const searchQuery = ref('');
const searchResults = ref<Player[]>([]);
const isSearching = ref(false);

const searchPlayers = () => {
  if (!searchQuery.value.trim()) {
    isSearching.value = false;
    return;
  }
  
  isSearching.value = true;
  const query = searchQuery.value.toLowerCase();
  searchResults.value = players.value.filter(player => 
    player.username.toLowerCase().includes(query) || 
    (player.team && player.team.toLowerCase().includes(query))
  );
};

const clearSearch = () => {
  searchQuery.value = '';
  isSearching.value = false;
};
</script>

<template>
  <div class="leaderboard-container">
    <h1>排行榜</h1>
    
    <!-- 排行榜切换 -->
    <div class="leaderboard-tabs">
      <button 
        @click="switchLeaderboard('individual')"
        :class="['tab-btn', { active: leaderboardType === 'individual' }]"
      >
        个人排名
      </button>
      <button 
        @click="switchLeaderboard('team')"
        :class="['tab-btn', { active: leaderboardType === 'team' }]"
      >
        团队排名
      </button>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-container">
      <input 
        type="text" 
        v-model="searchQuery" 
        @input="searchPlayers" 
        @keyup.enter="searchPlayers"
        placeholder="搜索用户或团队..." 
        class="search-input"
      />
      <button @click="clearSearch" class="clear-btn" v-if="searchQuery">×</button>
    </div>
    
    <!-- 排行榜表格 -->
    <div class="leaderboard-table-container">
      <table class="leaderboard-table">
        <thead>
          <tr>
            <th>排名</th>
            <th>用户名</th>
            <th v-if="leaderboardType === 'team'">团队</th>
            <th>积分</th>
            <th>已解决</th>
          </tr>
        </thead>
        <tbody>
          <!-- 搜索结果 -->
          <template v-if="isSearching && searchResults.length > 0">
            <tr v-for="player in searchResults" :key="player.id" :class="['leaderboard-row', { 'current-player': player.id === currentUser.id }]">
              <td class="rank">{{ player.rank }}</td>
              <td class="username">{{ player.username }}</td>
              <td v-if="leaderboardType === 'team'" class="team">{{ player.team }}</td>
              <td class="points">{{ player.points }}</td>
              <td class="solved">{{ player.solved }}</td>
            </tr>
          </template>
          
          <!-- 搜索无结果 -->
          <tr v-else-if="isSearching && searchResults.length === 0">
            <td colspan="5" class="no-results">未找到匹配的用户或团队</td>
          </tr>
          
          <!-- 正常排行榜 -->
          <template v-else>
            <!-- 前三名特殊样式 -->
            <tr v-for="player in players.slice(0, 3)" :key="player.id" class="leaderboard-row top-three">
              <td class="rank top-rank">
                <span class="medal" :class="`medal-${player.rank}`">{{ player.rank }}</span>
              </td>
              <td class="username">{{ player.username }}</td>
              <td v-if="leaderboardType === 'team'" class="team">{{ player.team }}</td>
              <td class="points">{{ player.points }}</td>
              <td class="solved">{{ player.solved }}</td>
            </tr>
            
            <!-- 其他玩家 -->
            <tr v-for="player in players.slice(3)" :key="player.id" :class="['leaderboard-row', { 'current-player': player.id === currentUser.id }]">
              <td class="rank">{{ player.rank }}</td>
              <td class="username">{{ player.username }}</td>
              <td v-if="leaderboardType === 'team'" class="team">{{ player.team }}</td>
              <td class="points">{{ player.points }}</td>
              <td class="solved">{{ player.solved }}</td>
            </tr>
            
            <!-- 当前用户（如果不在前十） -->
            <tr v-if="currentUser.rank > 10" class="leaderboard-row current-player">
              <td class="rank">{{ currentUser.rank }}</td>
              <td class="username">{{ currentUser.username }}</td>
              <td v-if="leaderboardType === 'team'" class="team">{{ currentUser.team || '-' }}</td>
              <td class="points">{{ currentUser.points }}</td>
              <td class="solved">{{ currentUser.solved }}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    
    <!-- 排行榜统计 -->
    <div class="leaderboard-stats">
      <div class="stat-item">
        <h3>总参与人数</h3>
        <p class="stat-value">{{ players.length + 2 }}</p>
      </div>
      <div class="stat-item">
        <h3>最高积分</h3>
        <p class="stat-value">{{ players[0]?.points || 0 }}</p>
      </div>
      <div class="stat-item">
        <h3>平均积分</h3>
        <p class="stat-value">{{ Math.round(players.reduce((sum, p) => sum + p.points, 0) / players.length) }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.leaderboard-container {
  width: 100%;
}

.leaderboard-container h1 {
  color: var(--color-primary);
  margin-bottom: 1.5em;
}

/* 排行榜切换 */
.leaderboard-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 2em;
}

.tab-btn {
  padding: 0.5em 1.5em;
  background-color: var(--color-bg);
  border: 1px solid rgba(243, 156, 18, 0.3);
  color: var(--color-bg-light);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  background-color: rgba(243, 156, 18, 0.1);
  box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.tab-btn.active {
  background-color: rgba(243, 156, 18, 0.2);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

/* 搜索框 */
.search-container {
  position: relative;
  margin-bottom: 2em;
}

.search-input {
  width: 100%;
  padding: 0.8em 2.5em 0.8em 1em;
  background-color: var(--color-bg);
  border: 1px solid rgba(243, 156, 18, 0.3);
  border-radius: 4px;
  color: var(--color-bg-light);
  font-family: inherit;
  font-size: 1em;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 1.5em;
  cursor: pointer;
  padding: 0;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.clear-btn:hover {
  background-color: rgba(243, 156, 18, 0.1);
}

/* 排行榜表格 */
.leaderboard-table-container {
  background-color: var(--color-bg);
  border: 1px solid rgba(243, 156, 18, 0.3);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2em;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-bg-light);
}

.leaderboard-table th, .leaderboard-table td {
  padding: 1em;
  text-align: left;
  border-bottom: 1px solid rgba(243, 156, 18, 0.1);
}

.leaderboard-table th {
  background-color: rgba(243, 156, 18, 0.1);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9em;
  color: var(--color-primary);
}

.leaderboard-row:hover {
  background-color: rgba(243, 156, 18, 0.05);
}

.leaderboard-row.current-player {
  background-color: rgba(243, 156, 18, 0.1);
  border-left: 3px solid var(--color-primary);
}

/* 前三名样式 */
.leaderboard-row.top-three {
  background-color: rgba(255, 215, 0, 0.1);
}

.rank {
  font-weight: bold;
  color: var(--color-text-dark);
}

.top-rank {
  position: relative;
}

.medal {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #000;
}

.medal-1 {
  background-color: gold;
}

.medal-2 {
  background-color: silver;
}

.medal-3 {
  background-color: #cd7f32; /* 铜色 */
}

.username {
  font-weight: 500;
  color: var(--color-primary);
}

.team {
  color: var(--color-text-dark);
}

.points {
  font-weight: bold;
  color: var(--color-text-dark);
}

.solved {
  color: var(--color-text-dark);
}

.no-results {
  text-align: center;
  padding: 2em;
  color: #ff6666;
}

/* 排行榜统计 */
.leaderboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5em;
}

.stat-item {
  background-color: var(--color-bg);
  border: 1px solid rgba(243, 156, 18, 0.3);
  border-radius: 8px;
  padding: 1.5em;
  text-align: center;
}

.stat-item h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
  color: var(--color-text-dark);
  font-size: 1.1em;
}

.stat-value {
  font-size: 2em;
  font-weight: bold;
  color: var(--color-primary);
  margin: 0;
  text-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .leaderboard-table {
    font-size: 0.9em;
  }
  
  .leaderboard-table th,
  .leaderboard-table td {
    padding: 0.8em 0.5em;
  }
  
  .leaderboard-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .leaderboard-tabs {
    flex-direction: column;
  }
  
  .tab-btn {
    width: 100%;
  }
  
  .leaderboard-table {
    font-size: 0.8em;
  }
}
</style>